<template>
  <div class="page-container query-list-container">
    <div>
      <div class="search-container">
        <el-form :inline="true" ref="form" :model="searchData" size="small">
          <el-form-item label="关键字输入">
            <el-input v-model="searchData.keyword" placeholder="请输入手机号或昵称"></el-input>
          </el-form-item>
          <el-form-item label="权益品牌">
            <el-select v-model="searchData.brandId" @change="brandChagne" clearable>
              <el-option
                v-for="brand in brandList"
                :key="brand.id"
                :label="brand.name"
                :value="brand.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权益产品">
            <el-select v-model="searchData.productId" clearable>
              <el-option
                v-for="product in productList"
                :key="product.id"
                :label="product.name"
                :value="product.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="onSearch" size="small">查询</el-button>
          <el-button @click="onReset" size="small">重置</el-button>
        </el-form>
      </div>
      <el-table class="mt-20 el-table-modify" :data="tableData" border show-summary>
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="memberNickname" align="center" label="用户昵称"></el-table-column>
        <el-table-column prop="memberCellphone" align="center" label="联系电话"></el-table-column>
        <el-table-column align="center" label="权益状态">
          <template slot-scope="scope">
            {{scope.row.active ? "激活" : "未激活"}}
          </template>
        </el-table-column>
        <el-table-column prop="brandName" align="center" label="权益品牌"></el-table-column>
        <el-table-column prop="productName" align="center" label="权益产品"></el-table-column>
        <el-table-column prop="saleWay" align="center" label="销售渠道"></el-table-column>
        <el-table-column prop="privilegeValue" align="center" label="权益价值"></el-table-column>
        <el-table-column prop="cost" align="center" label="实际支付金"></el-table-column>
        <el-table-column prop="openDate" align="center" label="开通时间"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="230">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="linToDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="pagination"
        class="mt-20"
        background
        :page-size.sync="pageOption.pageSize"
        :total="pageOption.total"
        @size-change="onSizeChange"
        @current-change="onPageChange"
        layout="slot,->,prev,pager,next,sizes,jumper"
      >
        <span
          class="pagination-title"
        >共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { privilegeProductSaleDetail } from "@/api/report";
import { enableBrands } from "@/api/brand";
import { productNamesEnable, productEnableByBrand } from "@/api/product";

export default {
  name: "EquitySaleTotalDetailed",
  components: {},
  data() {
    return {
      brandList: [],
      productList: [],
      searchData: {
        keyword: "",
        productId: "",
        brandId: ""
      },
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      },
      selectData: null,
      visible: false
    };
  },
  methods: {
    onSearch() {
      this.pageOption.page = 1;
      this.requestData();
    },
    onReset() {
      this.pageOption.page = 1;
      this.searchData.keyword = "";
      this.searchData.productId = "";
      this.searchData.brandId = "";
      this.productList = this.allProductList;
      this.requestData();
    },
    brandChagne(brandId) {
      if (brandId) {
        this.productEnableByBrand(brandId);
      } else {
        this.productList = this.allProductList;
      }
    },
    linToDetail(row) {
      this.$router.push({
        name: "equityOrderDetail",
        params: { id: row.roderId }
      });
    },
    async requestData() {
      const { page, pageSize: size } = this.pageOption;
      const postData = {},
        searchData = this.searchData;
      if (searchData.keyword) {
        postData.keyword = searchData.keyword;
      }
      if (searchData.productId) {
        postData.productId = searchData.productId;
      }

      if (searchData.brandId) {
        postData.brandId = searchData.brandId;
      }

      const { data, total } = await privilegeProductSaleDetail({
        page: page - 1,
        size,
        ...postData
      });
      this.tableData = data;
      this.pageOption.total = total;
      this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

      if (this.$refs.pagination) {
        let childrenRefs = this.$refs.pagination.$children;
        this.$nextTick(() => {
          childrenRefs.forEach(child => child.$forceUpdate());
        });
      }
    },
    async requestProduct() {
      try {
        const { data } = await productNamesEnable();
        this.allProductList = data;
        this.productList = data;
      } catch (err) {}
    },
    async productEnableByBrand(brandId) {
      try {
        const { data } = await productEnableByBrand(brandId);
        this.productList = data;
      } catch (err) {}
    },
    async requestBrand() {
      try {
        const { data } = await enableBrands();
        this.brandList = data;
      } catch (err) {}
    },
    onSizeChange(size) {
      this.pageOption.pageSize = size;
      this.requestData();
    },
    onPageChange(page) {
      this.pageOption.page = page;
      this.requestData();
    }
  },
  created() {
    this.requestData();
    this.requestProduct();
    this.requestBrand();
  }
};
</script>

<style lang="scss">
</style>